<template>
  <div class="contont1">
    <div class="left-data-box ">
      <div class="left-box clearfix">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>
        <div class="echart-box" ref="main"></div>
        <div class="data-manage-box clearfix">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <div class="manage-item ">
            <div class="rampant ">
            <el-form
              :rules="setTimeRules"
              :model="setTimeForm"
              label-width="80px"
            >
              <el-form-item label="时间间隔">
                <el-input
                  v-model="setTimeForm.Time"
                  size="mini"
                  style="width: 55%;margin-right:10px"
                  placeholder="请输入时间间隔"
                ></el-input>
                <el-button v-if="!isStartTime" size="mini" type="primary" @click="baocunStart">保存数据</el-button>
                <download-excel v-else class="export-excel-wrapper" :data="saveZhuanTaiList" :fields="json_fields" :header="header"
                  :name="downLoadExcelName">
                  <el-button size="mini" type="danger" @click="saveData">停止({{timeInterval}}秒)</el-button>
                </download-excel>
              </el-form-item>
            </el-form>
            <!-- <el-row style="margin-top: 20px;">
              <el-col :span="12" style="display: flex; justify-content: center;">
                <el-button v-if="!isStartTimeQ1" size="mini" type="primary" @click="baocunStartQ1">保存数据</el-button>
                <download-excel v-else class="export-excel-wrapper" :data="saveZhuanTaiList" :fields="json_fields" :header="header"
                  :name="downLoadExcelName">
                  &nbsp;&nbsp;<el-button size="mini" type="danger" @click="saveDataQ1">停止 ({{timeInterval}}秒)</el-button>
                </download-excel>
                <el-button v-if="!isStartTime" size="mini" type="primary" @click="baocunStart">保存数据</el-button>
                <download-excel v-else class="export-excel-wrapper" :data="saveZhuanTaiList" :fields="json_fields" :header="header"
                  :name="downLoadExcelName">
                  <el-button size="mini" type="danger" @click="saveData">停止</el-button>
                </download-excel>
              </el-col>
              <el-col :span="12" style="display: flex; justify-content: center;">
                <div style="margin-top: 5px;">{{timeInterval}} 秒</div>
              </el-col>
            </el-row> -->
          </div>
        </div>
          <div class="manage-item">
          <div class="rampant">
            <p>Q1夹角与Q2夹角的角度差</p>
            <el-input size="mini" disabled :value="zhuanTaiObj.jiaJiaoCha || ''"></el-input>
            <i
            class="showS"
            :style="{
              background:
                zhuanTaiObj.jiaJiaoCha < 0.01 ? 'green' : 'red',
            }"
          ></i>
          </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-data-box">
      <div class="cont-box">
        <div class="top-box clearfix">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <div class="from-box">
            <el-form ref="form" :rules="formRules" :model="form" label-width="80px">
              <div class="item-box">
                <fieldset class="fieldset-box">
                  <legend class="legend-box">串口设置</legend>
                  <div>
                    <el-form-item label="串口号" prop="ckh">
                      <el-select v-model="form.ckh" size="mini" style="width:60%" placeholder="请选择">
                        <el-option v-for="item in ckOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="波特率" prop="btl">
                      <el-select v-model="form.btl" size="mini" style="width:60%" placeholder="请选择">
                        <el-option v-for="item in btlOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                      <el-button size="mini" type="primary" @click="ztConnectClick">{{ connectName }}</el-button>
                    </el-form-item>
                  </div>
                </fieldset>
              </div>
              <div class="item-box">
                <fieldset class="fieldset-box">
                  <legend class="legend-box">使能控制区</legend>
                  <div>
                    <el-form-item>
                      <el-checkbox v-model="checkedNh" @change="nhsnClick" style="color: white;">内环使能</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                      <el-checkbox v-model="checkedWh" @change="whsnClick" style="color: white;">外环使能</el-checkbox>
                    </el-form-item>
                  </div>
                </fieldset>
              </div>
              <div class="item-box">
                <fieldset class="fieldset-box">
                  <legend class="legend-box">内环控制</legend>
                  <div>
                    <el-form-item label="工作模式">
                      <el-select v-model="form.nhsn_gzms" size="mini" style="width:90%" placeholder="请选择">
                        <el-option v-for="item in nhOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="角度">
                      <el-input v-model="form.nhsn_jd" size="mini" style="width:90%" placeholder="请输入角度">
                        <i slot="suffix" class="suffix">°</i>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="速度">
                      <el-input v-model="form.nhsn_sd" size="mini" style="width:90%" placeholder="请输入速度">
                        <i slot="suffix" class="suffix">°/s</i>
                      </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-checkbox class="checkbox" v-model="form.nhsn_zdjl">最短距离</el-checkbox>
                    </el-form-item>
                    <el-form-item class="btn-from-box">
                      <el-button size="mini" type="primary" @click="run(form.nhsn_gzms,1)">运行</el-button>
                      <el-button size="mini" type="primary">停 止</el-button>
                    </el-form-item>
                  </div>
                </fieldset>
              </div>
              <div class="item-box">
                <fieldset class="fieldset-box">
                  <legend class="legend-box">外环使能</legend>
                  <div>
                    <el-form-item label="工作模式">
                      <el-select v-model="form.whsn_gzms" size="mini" style="width:90%" placeholder="请选择">
                        <el-option v-for="item in whOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="角度">
                      <el-input v-model="form.whsn_jd" size="mini" style="width:90%" placeholder="请输入角度">
                        <i slot="suffix" class="suffix">°</i>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="速度">
                      <el-input v-model="form.whsn_sd" size="mini" style="width:90%" placeholder="请输入速度">
                        <i slot="suffix" class="suffix">°/s</i>
                      </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-checkbox class="checkbox" v-model="form.whsn_zdjl">最短距离</el-checkbox>
                    </el-form-item>
                    <el-form-item class="btn-from-box">
                      <el-button size="mini" type="primary" @click="run(form.whsn_gzms,2)">运行</el-button>
                      <el-button size="mini" type="primary">停 止</el-button>
                    </el-form-item>
                  </div>
                </fieldset>
              </div>
            </el-form>
          </div>
        </div>
        <div class="center-box clearfix">
          <div class="left-box">
            <el-button size="mini" type="primary" @click="run('0B', 3)">自 动 调 平</el-button>
            <el-button v-if="!isStartTimeQ1" size="mini" type="primary" @click="baocunStartQ1">保存数据</el-button>
            <download-excel v-else class="export-excel-wrapper" :data="saveQ1List" :fields="json_fields_q1" :header="headerQ1"
            :name="downLoadExcelNameQ1">
              &nbsp;&nbsp;<el-button size="mini" type="danger" @click="saveDataQ1">停止 ({{timeIntervalQ1}}秒)</el-button>
            </download-excel>
          </div>
          <div class="right-box">
            <el-button size="mini" type="primary" @click="run('', 4)">制 动 器 抱 闸</el-button>
            <el-button size="mini" type="primary" @click="run('', 5)">制 动 器 解 锁</el-button>
          </div>
        </div>
        <div class="bottom-box clearfix">
          <i class="topL"></i>
          <i class="topR"></i>
          <i class="bottomL"></i>
          <i class="bottomR"></i>
          <div class="from-box">
            <el-form ref="form" :model="zhuanTaiObj" label-width="80px">
                <el-form-item label="内环角度">
                  <el-input readonly="readonly" v-model="zhuanTaiObj.x" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="外环角度">
                  <el-input readonly="readonly" v-model="zhuanTaiObj.y" size="mini"></el-input>
                </el-form-item>
                <div class="item-box">
                  <fieldset class="fieldset-box">
                    <legend class="legend-box">基准面</legend>
                    <div>
                      <el-form-item class="el-form-item" label="Q1x">
                        <el-input readonly="readonly" v-model="zhuanTaiObj.q1x" size="mini"></el-input>
                      </el-form-item>
                      <el-form-item class="el-form-item" label="Q1y">
                        <el-input readonly="readonly" v-model="zhuanTaiObj.q1y" size="mini"></el-input>
                      </el-form-item>
                      <el-form-item class="el-form-item" label="Q1角度">
                        <el-input readonly="readonly" v-model="zhuanTaiObj.q1JiaJiao" size="mini"></el-input>
                      </el-form-item>
                      <!-- <el-form-item class="btn-from-box">
                        <el-button size="mini" type="primary" @click="run(form.nhsn_gzms,1)">运行</el-button>
                        <el-button size="mini" type="primary">停 止</el-button>
                      </el-form-item> -->
                    </div>
                  </fieldset>
                </div>
                <div class="item-box">
                  <fieldset class="fieldset-box">
                    <legend class="legend-box">测量面</legend>
                    <div>
                      <el-form-item label="Q2x">
                        <el-input readonly="readonly" v-model="zhuanTaiObj.q2x" size="mini"></el-input>
                      </el-form-item>        
                      <el-form-item label="Q2y">
                        <el-input readonly="readonly" v-model="zhuanTaiObj.q2y" size="mini"></el-input>
                      </el-form-item>
                      <el-form-item label="Q2角度">
                        <el-input readonly="readonly" v-model="zhuanTaiObj.q2JiaJiao" size="mini"></el-input>
                      </el-form-item>
                      <!-- <el-form-item class="btn-from-box">
                        <el-button size="mini" type="primary" @click="run(form.nhsn_gzms,1)">运行</el-button>
                        <el-button size="mini" type="primary">停 止</el-button>
                      </el-form-item> -->
                    </div>
                  </fieldset>
                </div>
            </el-form>
            <!-- <el-form ref="form" :model="zhuanTaiObj" label-width="80px">
              <el-form-item label="内环角度">
                <el-input readonly="readonly" v-model="zhuanTaiObj.x" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="外环角度">
                <el-input readonly="readonly" v-model="zhuanTaiObj.y" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="Q1x">
                <el-input readonly="readonly" v-model="zhuanTaiObj.q1x" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="Q2x">
                <el-input readonly="readonly" v-model="zhuanTaiObj.q2x" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="Q1y">
                <el-input readonly="readonly" v-model="zhuanTaiObj.q1y" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="Q2y">
                <el-input readonly="readonly" v-model="zhuanTaiObj.q2y" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="Q1角度">
                <el-input readonly="readonly" v-model="zhuanTaiObj.q1JiaJiao" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="Q2角度">
                <el-input readonly="readonly" v-model="zhuanTaiObj.q2JiaJiao" size="mini"></el-input>
              </el-form-item>
            </el-form> -->
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import mixin from './mixin'
export default {
  name: 'index',
  components: {},
  mixins: [mixin]

}
</script>
<style lang="scss">
@import "./mixins.scss";
.btn-from-box.el-form-item {
  margin-bottom: 0px;
  // margin-bottom: 10px;
}
.el-form-item__label {
  font-size: 12px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
.contont1 .right-data-box .cont-box .top-box .from-box .el-form {
  padding: 4px 0px;
}
</style>
